<?php $this -> load -> view('/includes/header.php'); ?>
<div class = "col-sm-6">
    <h3>Index <a href="<?php echo site_url('catalog/manageSong')?>"class= "btn btn-default pull-right">Add Song</a></h3>
    <br>
    <table id="catalog" class="table table-hover">
        <tr>
            <th>Name</th>
        </tr>
    </table>
</div>

<!-- PHP to JAVAscript-->
<script>var catalog =<?php echo $catalog; ?></script>
<script>var display_song_url =<?php echo '"'.site_url('catalog/displaySong').'"'?></script>
<script>
console.log(catalog);
    for (song in catalog) {
        song_url = '<a href = "' + display_song_url + '/' + catalog[song].song_id + '">' + catalog[song].name + '</a>';
        $('#catalog').append('<tr><td>' + song_url + '</tr></td>');
    }
</script>